<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style>
			.main {
				width: 400px;
				margin: 0 auto;
				text-align: center;
			}
			
			.list {
				border: 1px solid #999;
				min-height: 400px;
				margin-bottom: 20px;
				text-align: left;
			}
			
			.margin-left-20 {
				margin-left: 20px;
			}
			
			.del {
				background: red;
				color: #fff;
				float: right;
			}
		</style>
	</head>

	<body>
		<div class="main">
			<ol class="list" id="list">

			</ol>
			<input type="text" id="inp">
			<input type="button" value="提交" onclick="submit();">
		</div>
	</body>

</html>
<script src="js/util.js"></script>
<script>
	var inp = document.getElementById('inp');
	var list = document.getElementById('list');

	function submit() {
		// 获取输入内容
		var text = inp.value;
		// 获取输入时间并格式化
		
		// 创建li节点
		var li = document.createElement('li');
		// 把内容和时间以及删除按钮放入li内
		li.innerHTML = `${text}<button style="margin-left:30px;" onclick="del();">删除</button>`;
		// 获取ul的所有非空节点
		var lis = list.children;
		// 把li插入到ul前面
		list.insertBefore(li, lis[0]);	
	}

	// 删除节点(连同父节点)
	function del() {
		var button = event.target;
		var isDel = window.confirm('您确定要删除吗');
		if (isDel) {
			button.parentNode.remove();
		}
	}
</script>